<template>
    <div>
        <el-dialog class="todo-page" v-model="dialogVisible" width=" 800px" :before-close="handleClose"
                   :fullscreen="false">
                        <div class="todo-menu">
                            <div @click="toModel('todo-undo')">

                            </div>
                            <div @click="toModel('todo-done')">

                            </div>
                        </div>
            <div class="todo-boxing">
                <el-scrollbar height="500px">

                    <div id="todo-undo">
                        <div id="todo-box-do">
                            未完成
                        </div>
                        <el-card v-for="item,index in undo" class="todo-card">
                            <el-checkbox v-model="item.finish" :checked="item.finish" :indeterminate="false"
                                         @change="handleUndoChecked(item,index)" :key="index">{{item.scheduleTitle }}
                            </el-checkbox>
                            <el-button style="float:right ;" @click="deleteFromUndo(index)">
                                delete
                            </el-button>
                        </el-card>
                    </div>
                    <div id="todo-done">
                        <div id="todo-box-do">
                            已完成
                        </div>
                        <el-card v-for="item,index in done" class="todo-card">
                            <el-checkbox v-model="item.finish" :checked="item.finish"
                                         @change="handleDoneChecked(item,index)" :key="index">
                                <del>{{item.scheduleTitle }}</del>
                            </el-checkbox>
                            <el-button style="float:right ;" @click="deleteFromDone(index)">
                                delete
                            </el-button>
                        </el-card>
                    </div>



                </el-scrollbar>

                <el-input v-model="data" style="height:60px" @keydown.enter.native="addSchedule">

                </el-input>

            </div>
        </el-dialog>
    </div>

</template>

<script>

import $ from "jquery";

export default {
    props: ['dialogVisible'],
    mounted() {
        this.$nextTick(() => {
            this.querySchedule();
        })
    },
    data() {
        return {
            undo: [

            ],
            done: [

            ], data: ''
        }
    }, methods: {
        handleClose: function () {
            this.$emit('handle-close', false);
        }, handleInput() {
            this.undo.unshift({ value: this.data, checked: false });
            this.data = ''
        },
        handleUndoChecked(item, index) {

            this.done.unshift(item);
            
            this.undo.splice(index, 1);
            this.updateSchedule(item)

        },
        handleDoneChecked(item, index) {

            this.undo.unshift(item);
            
            this.done.splice(index, 1);
            // 
            this.updateSchedule(item)

        }, toModel:function(type) {
            // 等待dom加载完毕后执行

        },deleteFromUndo:function(index){
            
            this.undo.splice(index, 1);
            
            this.delSchedule(this.undo[index].scheduleID)
        },deleteFromDone:function(index){
            
            this.done.splice(index, 1);
            
            this.delSchedule(this.done[index].scheduleID)
        },openMsg:function (msg,result){
            this.$message({
                message: msg,
                type: result
            });
        },addSchedule:function (){//增加日程
            const that = this;
            $.ajax({
                data: {
                    'scheduleTitle': that.data,//待办标题
                    // 'scheduleContent': "",//待办内容
                    // 'scheduleTime':'',
                },
                url: "/schedule/addSchedule",
                success: function (res) {
                    that.openMsg(res.data.msg,'success')
                    
                    that.data = ''
                    that.querySchedule();
                },
            })
        },delSchedule:function (id){//删除日程
            const that = this;
            $.ajax({
                data: {
                    ids:id,
                },
                url: "/schedule/delSchedule",
                success: function (res) {
                    that.openMsg(res.data.msg,'success')
                    
                },
            })
        },querySchedule:function (){
            this.undo = [];
            this.done = [];
            // 
            let that = this;
            var data = null;
            $.ajax({
                url: "/schedule/querySchedule",
                success: res=> {
                    
                    // that.undo = res.data;
                    data = res.data;
                    // that.undo = data;
                    data.forEach(item=>{
                        
                        if(item.finish){

                            that.done.push(item)

                        }else {
                            that.undo.push(item)
                        }
                    })
                    
                    
                    

                    // 
                },
            })
            ///schedule/querySchedule
        },updateSchedule:function (data){//schedule/updateSchedule更改日程
            const that = this;
            $.ajax({
                data: data,
                url: "/schedule/updateSchedule",
                success: function (res) {
                    that.openMsg(res.data.msg,'success')
                    
                    for(let schedule in res.data){
                        // schedule.
                    }

                },
            })
        },
    }
}
</script>

<style scoped>
.todo-page {

    margin: 0;
    padding: 0;
}

.todo-menu {
    display: inline-block;
    width: 200px;
    height: 500px;
    background-color: antiquewhite;
}

.todo-boxing {
    position: relative;
    display: inline-block;
    height: 450px;
    width: 540px;

}
:deep() .el-dialog__body {
    display: flex;
    flex-direction: row;
}
.todo-card{
    margin: 20px;
}

#todo-box-do{
    text-align: center;
    font-size: large;
    color: #73767a;
}
</style>
